import React, { useState, useEffect } from 'react';
import './MapScreen.css';
import Character from './Character';

const MapScreen = ({ availablePets, onCollectPet, onReturn }) => {
  // 地图尺寸
  const mapWidth = 800;
  const mapHeight = 600;

  return (
    <div className="map-screen">
      <div className="map-container" style={{ width: mapWidth, height: mapHeight }}>
        {/* 地图背景和元素 */}
        <div className="map-background">
          {/* 地图上的装饰元素 */}
          <div className="map-decoration tree" style={{ top: '50px', left: '100px' }}>🌳</div>
          <div className="map-decoration tree" style={{ top: '150px', left: '700px' }}>🌳</div>
          <div className="map-decoration rock" style={{ top: '400px', left: '200px' }}>🪨</div>
          <div className="map-decoration flower" style={{ top: '300px', left: '500px' }}>🌸</div>
          <div className="map-decoration flower" style={{ top: '100px', left: '400px' }}>🌼</div>
          <div className="map-decoration house" style={{ top: '450px', left: '600px' }}>🏠</div>
        </div>

        {/* 可收集的宠物 */}
        {availablePets.map(pet => (
          <div 
            key={pet.id}
            data-id={pet.id}
            className="collectible-pet map-pet"
            style={{
              position: 'absolute',
              left: `${pet.position.x}px`,
              top: `${pet.position.y}px`,
              fontSize: '40px',
              zIndex: 50
            }}
          >
            {pet.emoji}
          </div>
        ))}

        {/* 玩家角色 */}
        <Character 
          onCollectPet={onCollectPet}
          availablePets={availablePets}
          mapWidth={mapWidth}
          mapHeight={mapHeight}
        />
      </div>

      {/* 返回主界面按钮 */}
      <button className="return-button" onClick={onReturn}>
        返回主界面
      </button>

      {/* 地图说明 */}
      <div className="map-instructions">
        <p>使用WASD键移动角色，触碰宠物即可收集</p>
        <p>已收集: {availablePets ? availablePets.length : 0} 只宠物</p>
      </div>
    </div>
  );
};

export default MapScreen;